<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<title>Fancytree HOWTO</title>

	<meta name="keywords" content="fancytree JavaScript JS dynamic html tree view treeview checkbox widget plugin for jQuery data structure library ajax open source free">
	<meta name="description" content="fancytree is a JavaScript treeview plugin for jQuery with support for checkboxes and lazy loading of branches.">

	<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>

	<script src="../lib/jquery.js" type="text/javascript"></script>

	<!-- Convert tabs to spaces and doc CSS -->
	<link rel="stylesheet" type="text/css" href="howto.css">
	<script src="howto.js" type="text/javascript"></script>

	<!-- Automatic TOC generator -->
	<script src="../lib//jquery.planize.js" type="text/javascript"></script>

	<!-- PrettyPrint (triggered in onload event) -->
	<link href="../lib/prettify.css" rel="stylesheet">
	<script src="../lib/prettify.js" type="text/javascript"></script>

	<script type="text/javascript">
	$(function(){
		// Log to Google Analytics, when not running locally
		if( document.URL.toLowerCase().indexOf('wwwendt.de/') >= 0 ) {
			var pageTracker = _gat._getTracker("UA-316028-1");
			pageTracker._trackPageview();
		}
		// Create TOC
		$("html *").planize({
			title: "Table of contents",
			min_level: 2,
			generate_toc: true,
			toc_elem: $("#toc")
		});
		// Format code samples
		prettyPrint();
	});
	</script>
</head>

<body>


<h1>Fancytree HOWTO (cookbook for frequent tasks)</h1>

<div class="hint">
	This document describes fancytree version: <strong>$Version:$</strong>.<br>
	Document revision: $Revision:$.<br>
	A current version may be found at the project site
	<a href="http://wwwendt.de/tech/fancytree/index.html">http://wwwendt.de/tech/fancytree/index.html</a>.
</div>

<!-- jquery.planize will generate a TOC here: -->
<div id="toc">
</div>

<p class="info">
	This is an info.
</p>

<h2>Initialization</h2>
<p>
	This section contains ...
</p>
<h3>Initialize the tree using a callback</h3>
<pre class="prettyprint">
$("#tree").fancytree({
	source: function(e, data) {
		data.result = [
			{title: "node 1", key: "1"},
			{title: "node 2", key: "2", folder: true},
			];
	},
});
</pre>


<h2>Event handling</h2>
<p>
	This section contains ...
</p>
<h3>Retrieve a FancytreeNode in a fancytree event handler</h3>
<pre class="prettyprint">
$("#tree").fancytree({
	[...]
	click: function(e, data) {
		var node = data.node,
			tt = $.ui.fancytree.getEventTargetType(e.originalEvent);
	},
});
</pre>


<h3>Retrieve a FancytreeNode in an arbitrary event handler</h3>
<pre class="prettyprint">
$(document).click()function(e, data) {
	var node = $.ui.fancytree.getNode(e),
		tt = $.ui.fancytree.getEventTargetType(e);
});
</pre>


</body>
</html>
